<template>
  <div class="viewDetail">
    <div class="viewDetail-title flex pl-16 bg_fff c_text2">
      <div class="tab-item fw-6 commhover mr-26">任务详情</div>
    </div>
    <div class="viewDetail-big">
      <div class="task_title f-20 mb-10 fw-6 c_text2">测试</div>
      <div class="flex tasktype">
        <el-tag class="mr-8" style="color: #1d39c4">任务类型：批量拉群</el-tag>
        <div class="taskstatus f-12 c_fff flexcenter br_4 warn">等待中</div>
      </div>
      <div class="mt-12 mb-20 flex infobox">
        <div class="infoitem">
          <div class="mb-12">创建时间：2024-04-11 13:58</div>
          <div class="mb-12">开始时间：2024-04-11 13:58</div>
          <div class="mb-12">结束时间：--</div>
          <div class="mb-12">创建人：主账号</div>
        </div>
        <div class="infoitem">
          <div class="mb-12">目标群人数：500</div>
          <div class="mb-12">预估入群率：100%</div>
          <div class="mb-12">
            排除群：<span
              class="c_primary commhover"
              @click="handleShowDetail('排除群条件')"
              >查看</span
            >
          </div>
          <div class="mb-12">
            目标群：<span
              class="c_primary commhover"
              @click="handleShowDetail('目标群条件')"
              >查看</span
            >
          </div>
        </div>
        <div class="infoitem">
          <div class="mb-12">
            被邀请客户：<span
              class="c_primary commhover"
              @click="handleShowDetail('被邀请客户条件')"
              >查看</span
            >
          </div>
          <div class="mb-12">入群前引导语：--</div>
          <div class="mb-12">流失和拉黑好友：不发送</div>
        </div>
      </div>
      <el-tabs value="first" type="card" class="cardtab">
        <el-tab-pane label="任务下发进度(0/3)" name="first"></el-tab-pane>
      </el-tabs>
      <div class="mytips_error">
        <i class="el-icon-warning iconinfo f-16 mr-10"></i>
        具体拉群进度详情请至各个企微号下对应任务中查看！
      </div>
      <!-- 表格 -->
      <el-table class="mt-12" v-loading="loading" :data="tableList">
        <el-table-column label="下发企微号	" fixed prop="userName">
          <template slot-scope="scope">
            <div class="flex kh_box">
              <img
                src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
                alt=""
                class="useravatar"
              />
              <div class="khnamebox pl-12">
                <div class="title c_222333">{{ scope.row.title }}</div>
                <div class="c_warning f-12">@志新</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发送进度	" prop="userName">
          <template slot-scope="scope">
            <span class="flex aligncenter">
              <img src="@/assets/images/iconsucess.png" alt="" />
              已完成（3/{{ scope.row.num || 0 }}）
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        class="mt-0"
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <div class="greetfoot flexcenter bg_fff p-12">
      <el-button type="primary" size="small" plain @click="handleSave">取消</el-button>
      <el-button type="primary" v-hasPermi="['system:batchgrouping:edit']" size="small" plain @click="handleSave">修改</el-button
      >
    </div>
    <info-detail v-if="showinfo" :visableIf.sync="showinfo" :title="title" />
  </div>
</template>

<script>
//import {listUser, delUser,} from "@/api/system/user";
import { listUser } from "@/api/system/user";
import InfoDetail from "./InfoDetail";
export default {
  name: "addOrEditUserOperations",
  components: {
    InfoDetail,
  },
  data() {
    return {
      loading: false,
      title:'',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      tableList: [{ id: 2 }],
      showinfo: false,
    };
  },
  props: {
    info: {
      type: Object,
      default: {},
    },
  },
  created() {
    if (this.info) {
      this.form.name = this.info.planName;
    }
  },
  methods: {
    handleShowDetail(title) {
      this.title = title;
      this.showinfo = true;
    },

    handleSave() {
      console.log("this.form:", this.form);
    },

    getList() {},
  },
};
</script>
<style lang="scss" scoped>
.viewDetail {
  height: 100%;
  position: relative;
  .viewDetail-title {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e9e9e9;
  }
}
.viewDetail-big {
  height: calc(100vh - 256px);
  overflow-y: auto;
  padding: 20px;
}
.tasktype {
  .taskstatus {
    padding: 2px 7px;
    background-color: #3070ff;
    &.warn {
      background-color: #ff8243;
    }
  }
}
.infobox {
  padding: 12px 12px 0;
  background: #f3f3f3;
  border-radius: 2px;
  border: 1px solid #e9e9e9;
  div {
    width: 220px;
  }
}
.cardtab {
  ::v-deep .el-tabs__nav,
  ::v-deep .el-tabs__header {
    border-color: #e9e9e9;
  }
  ::v-deep .el-tabs__item {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85) !important;
    text-shadow: 0 0 0.25px currentColor;
  }
}
.iconinfo {
  color: #f5222d;
  transform: rotate(180deg);
}
.greetfoot {
  border-top: 1px solid #e9e9e9;
  position: sticky;
  bottom: 0;
  z-index: 999;
}
</style>
